<template>
  <div>
    <div class="quill-editor">
    <div class="editor" ref="editor"></div>
  </div>
  </div>
</template>

<script>
// 引入原始组件
import Quill from 'quill'
// 引入核心样式和主题样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
export default {
  name: 'quill',
  data() {
    return {
      quill: null,
      options: {
        theme: 'snow',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
            [{ font: [] }],
            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
            [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
            ['blockquote', 'code-block'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
            [{ direction: 'rtl' }], // text direction
            [{ align: [] }],
            ['clean'], // remove formatting button
            ['image']
          ],
        },
        placeholder: '请输入内容...',
      },
    }
  },
  watch: {},
  mounted() {
    // 初始化编辑器
    this._initEditor()
  },
  methods: {
    // 初始化编辑器
    _initEditor() {
      // 获取编辑器的DOM容器
      let editorDom = this.$el.querySelector('.editor')
      // 初始化编辑器
      this.quill = new Quill(editorDom, this.options)
    },
    getContent(){
      let html = this.$refs.editor.children[0].innerHTML
      return html
    },
    setContent(txt){
      this.$refs.editor.children[0].innerHTML = txt
    }
  },
}
</script>

<style scoped>
.editor {
  height: 180px;
}
</style>
